<template>
    <div id="ForePublish">
        <div class="common-layout">
            <el-container>
                <el-header>
                    <input type="text" class="publish-title" placeholder="请输入标题..." v-model="blogPublish.title"/>
                    <div>
                        <span></span>
                        <span>保存成功</span>
                        <span></span>
                        <span>
              <div class="publish-button">
<!--                //发布文章-->
                <PublishButton :blogPublish="blogPublish" @clear-blog="clearBlog"></PublishButton>
              </div>
            </span>
                        <span>
              <!--                个人中心-->
                <el-dropdown ref="dropdown1" trigger="click" popper-class="ForePublish-el-dropdown">
                  <span class="el-dropdown-link">
                    <el-badge class="item">
                      <div class="block">
                        <el-avatar :size="40" :src="circleUrl"/>
                      </div>
                    </el-badge>
                  </span>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item></el-dropdown-item>
                      <el-dropdown-item>个人中心</el-dropdown-item>
                      <el-dropdown-item>个人图书</el-dropdown-item>
                      <el-dropdown-item @click="$router.push('/publish')">发布文章</el-dropdown-item>
                      <el-dropdown-item @click="$router.push('/chat')">聊天室</el-dropdown-item>
                      <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
            </span>
                    </div>
                </el-header>
                <el-main>
                    <div id="wangedit-menu"></div>
                </el-main>
                <el-footer>
                    <el-row class="ForePublish-row2">
                        <!--      内容左边部分-->
                        <el-col :span="12" style="background-color: white;margin-top: 20px;">
                            <div class="grid-content bg-purple-light">
                                <div id="wangedit-content"></div>
                            </div>
                        </el-col>
                        <!--      内容右边部分-->
                        <el-col :span="12" class="edit-content-show" v-html="editorContent">
                        </el-col>
                    </el-row>
                </el-footer>
            </el-container>
        </div>
    </div>
</template>

<script>
import E from 'wangeditor'
import request from '../../utils/request'
import PublishButton from '@/components/blog/PublishButton.vue'
import {mapState, mapGetters, mapActions, mapMutations} from "vuex";

// let editor;

export default {
    name: 'ForePulish',

    components: {
        PublishButton
    },

    props: {
        editBlog: {
            type: Object,
            default: () => {
            }
        }
    },

    data() {
        return {
            blogPublish: {},
            editorContent: '',
            circleUrl: '',
            editor: '',
            // editBlog:
        }
    },

    watch: {},

    computed: {
        headers() {
            return {
                'token': sessionStorage.getItem("token")
            }
        }
    },

    created() {
        this.loadEdit()
    },

    mounted() {
        // console.log("this.GET_EDITBLOG()",this.GET_EDITBLOG())
        this.load()
    },

    beforeDestroy() {
        this.destroy()
    },

    methods: {
        ...mapGetters('blog', ['GET_EDITBLOG']),
        clearBlog() {
            this.blogPublish = {};
            this.editorContent = "";
            this.editor.txt.html("")
        },
        loadEdit() {
            let editBlog = this.GET_EDITBLOG()
            if (editBlog == {} || editBlog == null || editBlog == undefined) {
                return
            }
            this.blogPublish = JSON.parse(JSON.stringify(this.GET_EDITBLOG()))
            // console.log("this.blogPublish",this.blogPublish)
        },
        load() {
            this.editor = new E('#wangedit-menu', '#wangedit-content')
            // console.log("this.editor", this.editor.config)
            this.editor.config.uploadImgShowBase64 = true
            // // 隐藏网络图片
            this.editor.config.showLinkImg = false;

            this.editor.config.debug = true;
            //图片上传接口
            this.editor.config.uploadImgServer = '' // 上传图片的接口地址
            this.editor.config.uploadFileName = 'image' // formdata中的name属性，比如现在是将图片image加入到formdate，后台从image中接收到图片数据
            this.editor.config.uploadImgHeaders = {
                token: sessionStorage.getItem("token") // 设置请求头
            }
            this.editor.config.uploadImgHooks = {
                customInsert: function (insertImg, result, editor) {
                    // console.log("成功", result);
                    // before: function (xhr, editor, files) {
                    //     // 图片上传之前触发
                    //     // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件

                    //     // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
                    //     // return {
                    //     //     prevent: true,
                    //     //     msg: '放弃上传'
                    //     // }
                    // },
                    // success: function (xhr, editor, result) {
                    //     // 图片上传并返回结果，图片插入成功之后触发
                    //     // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
                    // },
                    // fail: function (xhr, editor, result) {
                    //     // 图片上传并返回结果，但图片插入错误时触发
                    //     // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
                    // },
                    // error: function (xhr, editor) {
                    //     // 图片上传出错时触发
                    //     // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
                    // },
                    // timeout: function (xhr, editor) {
                    //     // 图片上传超时时触发
                    //     // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
                    // },

                    // // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
                    // // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
                    // customInsert: function (insertImg, result, editor) {
                    //     // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
                    //     // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

                    //     // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
                    //     var url = result.url
                    //     insertImg(url)

                    //     // result 必须是一个 JSON 格式字符串！！！否则报错
                    // }
                }
            }
            // 创建一个富文本编辑器
            this.editor.create()

            // 修改的时候，需要富文本内容回显，则需要加入以下代码
            this.editor.txt.html(this.blogPublish.content)

            this.editor.config.onchange = (html) => {
                // this.info_ = html // 绑定当前逐渐地值
                this.editorContent = html
                this.blogPublish.content = html
                // console.log("html", html)
            }
        },

        destroy() {
            this.editor.destroy()
            this.editor = null
        },

        // fileUploadSuccess(res) {
        //   if (res.code == 200 || res.code == 0) {
        //     this.blogPublish.firstPicture = res.data
        //   }
        // },

        // publish() {
        //   this.blogPublish.content = this.editorContent
        //   let user = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {}
        //   this.blogPublish.username = user
        //   request.post("/fore/blog/publish", this.blogPublish).then(res => {
        //     //文章发布
        //   })
        // },

        handlePublishOpen() {
        },
        handlePublishClose() {
        },
        logout() {
        }
    }

}
</script>

<style lang='less' scope>
@import url('../../style/ForePulish.less');
//@import url('../../style/ForeIndex.less');
</style>
